/*布局*/
@media all {
    #main {
        flex: 1;
        display: flex;
    }

    .l, .m, .r {
        position: relative;
        flex: 1.01;
        padding: 1.25rem;
    }

    .m {
        flex: 1.61;
    }

    .m > *:not(h3){
        flex: 1;
        position: relative;
        padding: .5rem 3rem 0 2rem;
    }

    .l {
        background-image: url("../img/index/bg_l.png");
    }
    .l>*{
        padding-left: 2rem;
        padding-right: 3rem;
    }

    div.l-t{
        margin-top: .625rem;
        height: 19.875rem;
    }
    div.l-m {
        height: 15.875rem;
    }

    div.l-b {
        height: 21rem;
    }

    div.m {
        padding-left: 0;
        padding-right: 0;
        display: block;
    }

    div.m-t {
        position: relative;
        height: 41.125rem;
        overflow: hidden;
    }

    div.m-b {
        padding: 0;
        height: 19rem;
        background-image: url("../img/index/bg_m_b.png");
    }

    div.m-b > :not(h4) {
        text-align: center;
    }

    div.r {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        display: block;
    }

    div.r-t {
        height: 40.25rem;
        margin-bottom: .875rem;
        padding-bottom: 0;
        background-image: url("../img/index/bg_r_t.png");
    }
    div.r-t > *{
        padding: 0 1.5rem 0 2rem;
    }
    div.r-t h3{
        padding-top: .1875rem;
    }
    div.r-t-t {
        margin-top: 2.25rem;
        margin-bottom: 3.25rem;
        height: 16.75rem;
    }
    div.r-t-b {
        height: 15rem;
    }
    div.r-b {
        height: 19rem;
        background-image: url("../img/index/bg_r_b.png");
    }

    h3 {
        padding-top: .25rem;
        flex: none !important;
        height: 3rem;
        font-size: 1.625rem;
        text-align: center;
    }

    .l > h3 {
        padding-top: .125rem;
    }

}

/* 左侧样式 */
@media all {
    .l-t h4 {
        padding-left: 3.25rem;
    }

    .l-t header,
    .l-m header {
        padding: .75rem 0 .5rem;
        text-align: center;
        font-size: 1.5rem;
        color: #fff;
    }

    .l-m header {
        padding-bottom: 1rem;
    }

    .l-t header strong,
    .l-m header strong {
        padding: 0 1.5rem;
        font-size: 2.25rem;
    }

    .l-t header .unit,
    .l-m header .unit {
        font-size: 1.625rem;
    }

    .l-t h5,
    .l-m h5 {
        display: inline-block;
        font-size: 1.25rem;
    }

    .l-t ul {
        display: flex;
        flex-direction: column;
        height: 12rem;
    }

    .l-t ul > li {
        flex: 1;
        margin-top: .375rem;
        padding-left: 2.5rem;
        border-top: .1px solid;
        line-height: 3.5rem;
    }

    .l-t ul > li:nth-of-type(1) {
        color: rgba(215, 192, 61, 1);
        background-color: rgba(215, 192, 61, .25);
    }

    .l-t ul > li:nth-of-type(2) {
        color: rgba(236, 122, 154, 1);
        background-color: rgba(236, 122, 154, .25);
    }

    .l-t ul > li:nth-of-type(3) {
        color: rgba(64, 200, 250, 1);
        background-color: rgba(64, 200, 250, .25);
    }

    .l-t ul > li i {
        margin-top: -.25rem;
        margin-left: 0;
        margin-right: 1.5rem;
    }

    .l-t ul > li strong,
    .l-m ul > li strong {
        padding-left: 3rem;
        padding-right: .25rem;
        color: #fff;
        font-size: 1.625rem;
    }

    .l-t ul > li .unit {
        color: #40c8fa;
    }

    .l-m ul > li {
        padding-left: 4.5rem;
        line-height: 2rem;
        font-size: 1.25rem;
    }

    .l-m ul > li i {
        margin-right: 1rem;
        margin-left: -1rem;
        width: 1.375rem;
        height: 1.375rem;
        vertical-align: text-bottom;
    }

    .l-m ul > li strong {
        padding-left: 2.5rem;
    }

    .l-m h4 {
        padding-left: 3.25rem;
    }

    .l-b h4 {
        padding-left: 1.875rem;
        margin-bottom: 1rem;
    }

    .l-b ul {
        /*margin-bottom: .5rem;*/
    }

    .l-b ul > li {
        display: inline-block;
        padding: 1rem 0;
        margin: 0 .625rem;
        width: 12rem;
        text-align: center;
        background-origin: border-box;
    }

    .l-b ul > li h5,
    .l-b ul > li .unit {
        font-size: 1.125rem;
    }

    .l-b ul > li h5 {
        margin-bottom: .375rem;;
    }

    .l-b ul > li strong {
        padding-right: .25rem;
        font-size: 1.625rem;
        color: inherit;
    }

    .l-b ul > li:nth-of-type(1) {
        color: #fea911;
        background-image: url("../img/index/bg_passengers.png");
    }

    .l-b ul > li:nth-of-type(1) h5 {
        color: #a76d00;
    }

    .l-b ul > li:nth-of-type(2) {
        margin-right: 0;
        margin-left: 1rem;
        color: #f14a61;
        background-image: url("../img/index/bg_freight.png");
    }

    .l-b ul > li:nth-of-type(2) h5 {
        color: #f14b63;
    }

    .l-b .chartBox {
        height: 11rem;
    }
}

/* 中间样式 */
@media all {
    .m-t {
        /*background-image: url("../img/index/bg_AsiaMap.png");*/
        /*background-repeat: no-repeat;*/
        /*background:  url("../img/index/bg_AsiaMap.png") 50% 50% no-repeat;*/
        background-size: contain;
        /*perspective: 500px;*/
    }

    .m-t #ec02_map_airLines {
        /*transform: rotateX(37deg) rotateY(5deg) rotateZ(-10deg);*/
    }

    div.m-t ul {
        position: absolute;
        left: 3rem;
        top: 2.5rem;
    }

    div.m-t ul > li h5 {
        display: inline-block;
        color: #fff;
        font-size: 1.5rem;
    }

    div.m-t ul > li strong {
        padding: 0 .5rem 0 1rem;
        font-size: 2rem;
    }

    div.m-t ul > li .unit {
        color: #fff;
        font-size: 1.375rem;
    }

    div.m-t .chartBox {
        height: 40rem;
    }

    div.m-b h4 {
        margin-bottom: 2rem;
        padding-top: .375rem;
        padding-left: 3.625rem;
    }

    div.m-b header {
        margin: 0 auto 1.375rem;
        width: 41rem;
        height: 5.375rem;
        line-height: 4.5rem;
        font-size: 1.5rem;
        color: #fff;
        background-image: url(../img/index/bg_transfiniteEvent.png);
    }

    div.m-b header i {
        position: relative;
        top: -.25rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    div.m-b header strong {
        color: #ff6475;
        font-size: 2.5rem;
        padding: 0 .5rem;
    }

    div.m-b header .unit {
        font-size: 1.25rem;
    }

    div.m-b ul > li {
        display: inline-block;
        margin: 0 4rem;
    }

    div.m-b ul > li i {
        width: 1.625rem;
        height: 1.625rem;
        margin-bottom: .75rem;
    }

    div.m-b ul > li h5 {
        font-size: 1.125rem;

    }

    div.m-b ul > li strong {

        display: inline-block;
        color: #fff;
        font-size: 1.75rem;
        margin: .5rem .5rem 0;
    }

    div.m-b ul > li .unit {
        font-size: 1.125rem;
    }

}

/* 右侧样式 */
@media all {
    div.r-t-t h4 {
        padding-left: 3.625rem;
    }

    div.r-t-t ul {
        display: flex;
        justify-content: space-around;
    }

    div.r-t-t ul:first-of-type {
        margin-bottom: 1rem;
    }

    div.r-t-t ul > li {
        text-align: center;
        font-size: 1.25rem;
        color: #fff;
    }

    div.r-t-t ul > li h5 {
        margin-top: 1.125rem;
        margin-bottom: .75rem;
        font-size: 1.25rem;
    }

    div.r-t-t ul > li .unit {
        padding-left: 1rem;
        font-size: 1.5rem;
    }

    div.r-t-t ul > li strong {

        font-size: 2.25rem;
    }

    div.r-t-t ul:nth-of-type(2) > li h5 {
        margin-top: 1rem;
        margin-bottom: .125rem;
    }

    div.r-t-t ul:nth-of-type(2) > li strong {
        font-size: 1.5rem;
    }

    div.r-t-t ul:nth-of-type(2) > li:nth-of-type(3) strong {
        color: #fdc856;
    }

    div.r-t-t ul:nth-of-type(2) > li:nth-of-type(4) strong {
        color: #f14a61;
    }

    div.r-t-t .flyTime {
        padding-left: 1.25rem;
        background-image: url("../img/index/bg_flyTime.png");
        /*white-space: nowrap;*/
    }

    div.r-t-t .flyTime > div {
        display: inline-block;
        margin-left: 1rem;
        line-height: 3rem;
        font-size: 1.125rem;
    }

    div.r-t-t .flyTime strong {
        padding-left: .25rem;
        font-size: 1.375rem;
        color: #fff;
    }

    div.r-t-t .flyTime span {
        font-size: 1rem;
    }

    div.r-t-b h4 {
        padding-left: 2.75rem;
        margin-bottom: .5rem;
    }

    div.r-t-b .chartBox {
        height: 12.5rem;
    }

    div.r-b h4 {
        display: inline-block;
        margin-bottom: 1.5rem;
        padding-left: 1rem;
        padding-top: 1.625rem;
    }
    div.r-b h4:before,
    div.r-b h4:after {
        content: '';
        display: inline-block;
        width: 2rem;
        height: .5rem;
        margin-left: .5rem;
        margin-right: .5rem;
        background: url("../img/com/bd_title_l.png") no-repeat;
        background-size: contain;
    }
    div.r-b h4:after {
        background-image: url("../img/com/bd_title_r.png");
    }
    div.r-b ul {
        margin-bottom: 2rem;
        text-align: center;
    }

    div.r-b ul > li {
        margin: 0 .5rem;
        padding: 0.5rem 0;
        width: 12.25rem;
        display: inline-block;
        background-origin: border-box;
        background-image: url(../img/index/bg_oilQuantity1.png);
    }

    div.r-b ul > li h5,
    div.r-b ul > li .unit {
        font-size: 1.125rem;
    }

    div.r-b ul > li h5 {
        line-height: 2rem;
    }

    div.r-b ul > li strong {
        color: #fff;
        font-size: 1.375rem;
    }

    /*div.r-b ul > li:first-child h5,*/
    div.r-b ul > li:first-child .unit {
        font-size: 1.25rem;
    }

    div.r-b ul > li:first-child strong {
        color: #fff;
        font-size: 1.5rem;
    }

    div.r-b ul:nth-of-type(2) > li {
        width: 8.75rem;
        background-image: url("../img/index/bg_oilQuantity2.png");
    }

}
